<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i>信息管理列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="delete" class="handle-del mr10" @click="saveBtn">新增</el-button>
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
            </div>
            <el-table border class="table" ref="multipleTable" :data="mainDatas.slice((currentPage-1)*pagesize,currentPage*pagesize)">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" sortable width="150">
                </el-table-column>
                <el-table-column prop="name" label="地点名称" width="150">
                </el-table-column>
                <el-table-column prop="message" label="备注信息" width="180">
                </el-table-column>
                <el-table-column prop="longitude" label="经度" width="120">
                </el-table-column>
                <el-table-column prop="latitude" label="纬度" width="120">

                </el-table-column>
                <el-table-column prop="altitude" label="高度" width="120">

                </el-table-column>
                <el-table-column label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row.id)">删除</el-button>
                        <el-button type="text" icon="el-icon" @click="baiduAPI(scope.$index, scope.row)">查看地图</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total=" mainDatas.length">
            </el-pagination>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="50px">

                <el-form-item label="地点名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="备注信息">
                    <el-input v-model="form.message"></el-input>
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="form.long"></el-input>
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="form.lat"></el-input>
                </el-form-item>
                <el-form-item label="高度">
                    <el-input v-model="form.alt"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增按钮的dialog -->
        <el-dialog title="添加信息" :visible.sync="showSave" width="30%" :close-on-click-modal="false"
                   :close-on-press-escape="false">
            <el-form class="editor-form" :model="editor" status-icon ref="editor"
                     label-width="100px">
                <el-form-item prop="name" label="地点" class="is-required"
                              :rules="[{ required: true, message: '产品标题不能为空'}]">
                    <el-input v-model="editor.name" placeholder="名称"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="message" label="备注" class="is-required"
                              :rules="[{ required: true, message: '不能为空'}]">
                    <el-input v-model="editor.message" placeholder="备注"
                              auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item prop="long" label="经度" class="is-required"
                              :rules="[{ required: true, message: ''}]">
                    <el-input v-model="editor.long" placeholder=""
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="lat" label="纬度" class="is-required"
                              :rules="[{ required: true, message: ''}]">
                    <el-input v-model="editor.lat" placeholder=""
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="lat" label="高度" class="is-required"
                              :rules="[{ required: true, message: ''}]">
                    <el-input v-model="editor.alt" placeholder=""
                              auto-complete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showSave = false">取 消</el-button>
                <el-button type="primary" @click="save('editor')">新增</el-button>
            </div>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'basetable',
        data() {
            return {
                id:'',
                url: './vuetable.json',
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,

                //编辑表
                editor: {
                    name: '',
                    message: '',
                    long: '',
                    lat:'',
                    alt:''
                },
                //添加dialog
                showSave: false,
                //编辑dialog
                showEditor: false,
                form: {
                    name: '',
                    message: '',
                    long: '',
                    lat:'',
                    alt:''
                },
                mainDatas:[],
                currentPage:1, //初始页
                pagesize:10,    //    每页的数据
                idx: -1,
                baidu:{
                    long:'',
                    lat:''
                }
            }
        },
        created() {

            this.getDatas();
        },
        computed: {
            data() {
                return this.mainDatas.filter((d) => {
                    let is_del = false;
                    for (let i = 0; i < this.del_list.length; i++) {
                        if (d.name === this.del_list[i].name) {
                            is_del = true;
                            break;
                        }
                    }
                    if (!is_del) {
                        if (d.address.indexOf(this.select_cate) > -1 &&
                            (d.name.indexOf(this.select_word) > -1 ||
                                d.address.indexOf(this.select_word) > -1)
                        ) {
                            return d;
                        }
                    }
                })
            }
        },
        methods: {
            baiduAPI(index, row){
                this.idx = index;
                const item = this.mainDatas[index];

                    this.baidu.long=item.longitude,
                    this.baidu.lat=item.latitude

                window.location="http://api.map.baidu.com/geocoder?location="+this.baidu.long+","+this.baidu.lat+"&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo"
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
           getDatas() {
                let _this = this;
                _this.$http.get('/message').then((res) => {
                    _this.mainDatas = res.data;
                }, (err) => {
                    console.log(err);
                })
            },
            // 获取 easy-mock 的模拟数据

            search() {
                let _this = this;
                if (_this.select_word == '') {
                    alert('请输入商品名称');
                } else {
                    alert(this.select_word);
                    _this.$http.get('/searchMessage', {
                        params: {
                            kw: _this.select_word,

                        }
                    }).then((res) => {
                        _this.mainDatas = res.data;
                        console.log(_this.mainDatas);
                    }, (err) => {
                        console.log(err);
                    });
                }
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {
                this.idx = index;
                const item = this.mainDatas[index];
                this.form = {
                    name: item.name,
                    message: item.message,
                    long:item.longitude,
                    lat:item.latitude
                }
                this.id = item.id;
                this.editVisible = true;
            },
            handleDelete(id) {
                alert(id);
                let _this = this;
                _this.$http.get('/deleteMessage', {
                    params: {
                        pId: id
                    }
                }).then((res) => {
                    alert("删除成功");
                }, (err) => {
                    console.log(err);
                })
                this.getDatas();
            },
            //新增按钮
            saveBtn() {
                //打开新增dialog
                this.showSave = true;
                this.editor = {}; //清空表单

                //清空原始数据
                if (this.$refs['editor'] !== undefined) {
                    this.$refs['editor'].resetFields(); //经查询：可能是由于对象还没有生成，导致误读了空对象而报错
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 保存编辑
            saveEdit() {
                alert(this.id);
                let _this = this;
                _this.$http.get('/updateMessage', {
                    params: {
                        id: this.id,
                        name: this.form.name,
                        message: this.form.message,
                        long:this.form.long,
                        lat:this.form.lat
                    }
                }).then((res) => {
                    alert("更新成功");
                }, (err) => {
                    console.log(err);
                });
                this.$set(this.tableData, this.idx, this.form);
                this.editVisible = false;
                this.getDatas();
                // this.$message.success(`修改第 ${this.idx+1} 行成功`);
            },
            save(editor) {
                let _this = this;
                _this.$http.get('/createMessage', {
                    params: {
                        name: this.editor.name,
                       message: this.editor.message,
                        long:this.editor.long,
                        lat:this.editor.lat,
                        alt:this.editor.alt
                    }
                }).then((res) => {
                    alert(res.toString());
                    alert("更新成功");
                }, (err) => {
                    console.log(err);
                });

                this.getDatas();
                this.showSave = false;

            },
            // 确定删除
            deleteRow() {
                this.tableData.splice(this.idx, 1);
                this.$message.success('删除成功');
                this.delVisible = false;
            }
        }
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
    .handle-select {
        width: 120px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
</style>
